<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>京淘商城后台管理系统</title>
	<div th:include="/common-js.html"></div>
<style type="text/css">
	.content {
		padding: 10px 10px 10px 10px;
	}
</style>
</head>
<body class="easyui-layout">

    <div data-options="region:'west',title:'菜单',split:true" style="width:180px;">
    	<ul id="menu" class="easyui-tree" style="margin-top: 10px;margin-left: 5px;">
         	<li>
         		<span>商品管理</span>
         		<ul>
	         		<li data-options="attributes:{'url':'/page/item_add'}">新增商品</li>
	         		<li data-options="attributes:{'url':'/page/item_list'}">查询商品</li>
	         		<li data-options="attributes:{'url':'/page/item_param_list'}">规格参数</li>
	         	</ul>
         	</li>
         	<li>
         		<span>网站内容管理</span>
         		<ul>
	         		<li data-options="attributes:{'url':'/page/content_category'}">内容分类管理</li>
	         		<li data-options="attributes:{'url':'/page/content'}">内容管理</li>
	         	</ul>
         	</li>
         </ul>
    </div>
    <div data-options="region:'center',title:''">
    	<div id="tabs" class="easyui-tabs">
		    <div title="首页" style="padding:20px;">
		        	
		    </div>
		</div>
    </div>
	<div style="position: absolute;right: 18px;top:0px;">
		<div class="easyui-panel" style="padding:2px;font-size: 20px;font-weight: 900;">
			<a href="javascript:void(0);" class="easyui-menubutton" data-options="menu:'#layout_north_pfMenu',iconCls:'icon-ok'">更换皮肤</a>
		</div>
	</div>
	<div id="layout_north_pfMenu" style=" display: none;">
		<div onclick="changeTheme('default');">default</div>
		<div onclick="changeTheme('black');">black</div>
		<div onclick="changeTheme('bootstrap');">bootstrap</div>
		<div onclick="changeTheme('gray');">gray</div>
		<div onclick="changeTheme('metro');">metro</div>
	</div>

	<script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script type="text/javascript">
$(function(){
    changeTheme = function(themeName) {
        var $easyuiTheme = $('#easyuiTheme');
        var url = $easyuiTheme.attr('href');
        var href = url.substring(0, url.indexOf('themes')) + 'themes/' + themeName + '/easyui.css';
        $easyuiTheme.attr('href', href);
        var $iframe = $('iframe');
        if ($iframe.length > 0) {
            for ( var i = 0; i < $iframe.length; i++) {
                var ifr = $iframe[i];
                $(ifr).contents().find('#easyuiTheme').attr('href', href);
            }
        }
        $.cookie('easyuiThemeName', themeName, {
            expires : 7
        });
    };
    if($.cookie('easyuiThemeName')){
        changeTheme($.cookie('easyuiThemeName'));
    }
	$('#menu').tree({
		onClick: function(node){
			if($('#menu').tree("isLeaf",node.target)){
				var tabs = $("#tabs");
				var tab = tabs.tabs("getTab",node.text);
				if(tab){
					tabs.tabs("select",node.text);
				}else{
                    var content = '<iframe scrolling="auto" frameborder="0"  src="'+node.attributes.url+'" style="width:100%;height:100%;"></iframe>';
                    tabs.tabs('add',{
					    title:node.text,
					    content:content,
					    closable:true,
					    bodyCls:"content"
					});
				}
			}
		}
	});
});
</script>
</body>
</html>